<template>
    <div class="remind-dialog-page">
        <el-dialog
            v-model="dialog.visible"
            width="50%"
            destroy-on-close
            :close-on-click-modal="false"
            title="过期提醒设置">
            <el-form
                ref="setFormRef"
                class="form-body"
                :rules="rules"
                label-position="right"
                :model="dialog"
                label-width="100">
                <el-form-item prop="switch">
                    <template #label>
                        <el-switch v-model="dialog.switch" :active-value="2" :inactive-value="1" />
                    </template>
                    开启后，选中的成员将在【企业微信-应用消息】，接受达人过期的消息。
                </el-form-item>
                <div v-if="dialog.switch == 2">
                    <el-form-item label="接收成员：" prop="work_user_ids">
                        <el-button :icon="Plus" @click="openDepart">选择员工</el-button>
                        <div
                            class="zw-common-scrollbar render-user-tag"
                            :class="{ 'render-tags': dialog.work_user_ids?.length }">
                            <el-tag
                                v-for="(tag, i) in dialog.work_user_ids"
                                :key="tag.id"
                                effect="plain"
                                closable
                                :disable-transitions="false"
                                @close="handleCloseTag(tag, i)">
                                <img class="work-usericon" src="@/assets/image/customer/renyuan_icon.png" />
                                {{ tag.name }}
                            </el-tag>
                        </div>
                    </el-form-item>
                    <el-form-item label="提醒天数：" prop="day">
                        达人过期前
                        <el-input-number
                            v-model="dialog.day"
                            :min="1"
                            precision="0"
                            :value-on-clear="1"
                            :max="10"
                            controls-position="right"
                            @blur="numberMove" />
                        天开始提醒，每天上午10:00提醒一次。
                    </el-form-item>
                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelHandler"> 取消 </el-button>
                    <el-button type="primary" @click="submitHandler"> 保存 </el-button>
                </div>
            </template>
        </el-dialog>
        <ZW-depart ref="departRef" @submit="addDepartSubmit" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getRemindSetting, setRemindSetting } from '@/api/ecommerce/wiseManList';
import ZWDepart from '@/components/ZWDepart1.0.vue';
import { Plus } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';

const dialog = reactive({
    visible: false,
    switch: 1, //1-关 2-开
    work_user_ids: [{ id: 521, name: '王超' }], //接收成员
    day: 3 //过期前x天
});

const setFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
    work_user_ids: [
        {
            required: true,
            message: '请选择接收消息的员工',
            trigger: ['change']
        }
    ]
});

// 打开当前弹窗
const openDialog = async () => {
    const data = await getRemindSetting('');
    dialog.day = data?.day || 3;
    dialog.switch = data?.switch || 1;
    dialog.work_user_ids = data?.work_user_ids || [];
    dialog.visible = true;
};

// 提醒天数失焦
const numberMove = () => {
    if (dialog.day < 1) {
        dialog.day = 1;
    }
};

// 取消
const cancelHandler = () => {
    dialog.visible = false;
};

//确定
const submitHandler = () => {
    if (!setFormRef.value) return;
    setFormRef.value.validate(async (valid: boolean) => {
        if (valid) {
            let para = {
                switch: dialog.switch,
                work_user_ids: dialog.work_user_ids,
                day: dialog.day
            };
            if (dialog.switch !== 2) {
                para = {
                    switch: dialog.switch,
                    work_user_ids: [],
                    day: 3
                };
            }
            await setRemindSetting(para);
            dialog.visible = false;
        }
    });
};

const departRef = ref();

// 打开选择员工弹窗
const openDepart = () => {
    departRef.value.departVisble = true;
    departRef.value.selectedMember = [...dialog.work_user_ids];
};

// 选择员工
const addDepartSubmit = (data: Array<{ id: number; name: string }>) => {
    dialog.work_user_ids.length = 0;
    const arr = Array.from(data, item => ({
        name: item.name,
        id: item.id
    }));
    dialog.work_user_ids.push(...arr);
    if (!setFormRef.value) return;
    setFormRef.value.validateField('work_user_ids', async (valid: boolean) => {});
};

// 删除选择的员工
const handleCloseTag = (val: any) => {
    dialog.work_user_ids = dialog.work_user_ids.filter(x => x.id !== val.id);
};

defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.remind-dialog-page {
    .form-body {
        margin-top: 17px;
    }

    .render-user-tag {
        max-height: 234px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .render-tags {
        line-height: normal;
        margin: 8px -6px 0;
    }

    .work-usericon {
        width: 10px;
        height: 11px;
        vertical-align: middle;
        margin-right: 8px;
    }

    .el-tag {
        user-select: none;
        cursor: pointer;
        height: auto;
        line-height: normal;
        padding: 9px 12px;
        border-radius: 4px;
        border: 1px solid #ffc69e;
        background-color: #fffaf9;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #ff6b00;
        margin: 12px 6px 0;

        :deep(.el-tag__close) {
            margin-left: 14px;

            --el-tag-hover-color: #ff6b00;
        }
    }
}
</style>
